import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"

export default function OrdersPage() {
  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold mb-8">我的订单</h1>
      <div className="space-y-6">
        {orders.map((order) => (
          <Card key={order.id}>
            <CardHeader className="pb-2">
              <div className="flex justify-between items-center">
                <CardTitle className="text-lg">订单号：{order.id}</CardTitle>
                <span className="text-sm text-muted-foreground">{order.date}</span>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                {order.items.map((item) => (
                  <div key={item.id} className="flex gap-4">
                    <div className="w-20 h-20 bg-secondary rounded-lg overflow-hidden">
                      <img
                        src={item.image || "/placeholder.svg"}
                        alt={item.name}
                        className="w-full h-full object-cover"
                      />
                    </div>
                    <div className="flex-1">
                      <h3 className="font-semibold">{item.name}</h3>
                      <p className="text-sm text-muted-foreground">数量：{item.quantity}</p>
                      <div className="mt-1 text-primary font-bold">¥{item.price}</div>
                    </div>
                  </div>
                ))}
                <div className="flex justify-between items-center pt-4 border-t">
                  <div className="text-muted-foreground">共 {order.items.length} 件商品</div>
                  <div className="space-x-4">
                    <span className="text-lg font-bold">总计：¥{order.total}</span>
                    <Button variant="outline">查看详情</Button>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>
    </div>
  )
}

const orders = [
  {
    id: "ORDER20240220001",
    date: "2024-02-20",
    total: 897,
    items: [
      {
        id: 1,
        name: "无线蓝牙耳机",
        price: 299,
        quantity: 1,
        image: "/placeholder.svg?height=200&width=200",
      },
      {
        id: 2,
        name: "智能手表",
        price: 599,
        quantity: 1,
        image: "/placeholder.svg?height=200&width=200",
      },
    ],
  },
]

